<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<%@include file="../../common/taglib/taglib.jsp" %>
<%@include file="../common/dwz.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="${baseURL}/dwz/images/loginuser.png" type="image/png">
    <title>风陵渡黄河大桥健康检测及运营安全智能预警系统</title>
    <link href="${baseURL}/dwz/css/style.default.css" rel="stylesheet">
    <link href="${baseURL}/dwz/css/bootstrap-override.css" rel="stylesheet">
    <link href="${baseURL}/dwz/css/jquery-ui-1.10.3.css" rel="stylesheet">
    <link href="${baseURL}/dwz/css/weather-icons.min.css" rel="stylesheet">
    <link href="${baseURL}/dwz/css/animate.delay.css" rel="stylesheet">
    <link href="${baseURL}/dwz/css/animate.min.css" rel="stylesheet">
    <link href="${baseURL}/dwz/css/toggles.css" rel="stylesheet">
    <link href="${baseURL}/dwz/css/select2.css" rel="stylesheet">
    <link href="${baseURL}/dwz/css/lato.css" rel="stylesheet">
    <link href="${baseURL}/dwz/css/roboto.css" rel="stylesheet">
</head>
<body>
<!-- Preloader -->
<div id="preloader">
    <div id="status"><i class="fa fa-spinner fa-spin"></i></div>
</div>

<section>

    <!--  左侧导航栏开始-->

    <c:import url="../common/left.jsp"></c:import>
    <!--  左侧导航栏结束-->

    <div class="mainpanel">

        <!--    头导航栏开始-->

        <c:import url="../common/hander.jsp"></c:import>
        <!--    头导航栏结束-->
        <!--   正文开始-->
        <div class="pageheader">
            <h2><i class="fa fa-home"></i> 首页 <span>大数据展示</span></h2>
        </div>

        <div class="contentpanel">

            <div class="row">

                <div class="col-sm-6 col-md-3">
                    <div class="panel panel-success panel-stat">
                        <div class="panel-heading">

                            <div class="stat">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <img src="${baseURL}/dwz/images/is-user.png" alt=""/>
                                    </div>
                                    <div class="col-xs-8">
                                        <small class="stat-label">日交通量</small>
                                        <h1>900k+</h1>
                                    </div>
                                </div><!-- row -->

                                <div class="mb15"></div>

                                <div class="row">
                                    <div class="col-xs-6">
                                        <small class="stat-label">重载车辆</small>
                                        <h4>56</h4>
                                    </div>

                                    <div class="col-xs-6">
                                        <small class="stat-label">超载车辆</small>
                                        <h4>12</h4>
                                    </div>
                                </div><!-- row -->
                            </div><!-- stat -->

                        </div><!-- panel-heading -->
                    </div><!-- panel -->
                </div><!-- col-sm-6 -->

                <div class="col-sm-6 col-md-3">
                    <div class="panel panel-danger panel-stat">
                        <div class="panel-heading">

                            <div class="stat">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <img src="${baseURL}/dwz/images/is-document.png" alt=""/>
                                    </div>
                                    <div class="col-xs-8">
                                        <small class="stat-label">振动频率</small>
                                        <h1>54.40%</h1>
                                    </div>
                                </div><!-- row -->

                                <div class="mb15"></div>

                                <small class="stat-label">最高阈值</small>
                                <h4>34HZ</h4>

                            </div><!-- stat -->

                        </div><!-- panel-heading -->
                    </div><!-- panel -->
                </div><!-- col-sm-6 -->

                <div class="col-sm-6 col-md-3">
                    <div class="panel panel-primary panel-stat">
                        <div class="panel-heading">

                            <div class="stat">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <img src="${baseURL}/dwz/images/is-document.png" alt=""/>
                                    </div>
                                    <div class="col-xs-8">
                                        <small class="stat-label">日预警数</small>
                                        <h1>23</h1>
                                    </div>
                                </div><!-- row -->

                                <div class="mb15"></div>

                                <small class="stat-label">较昨日</small>
                                <h4>-34.23%</h4>

                            </div><!-- stat -->

                        </div><!-- panel-heading -->
                    </div><!-- panel -->
                </div><!-- col-sm-6 -->

                <div class="col-sm-6 col-md-3">
                    <div class="panel panel-dark panel-stat">
                        <div class="panel-heading">

                            <div class="stat">
                                <div class="row">
                                    <div class="col-xs-4">
                                        <img src="${baseURL}/dwz/images/is-money.png" alt=""/>
                                    </div>
                                    <div class="col-xs-8">
                                        <small class="stat-label">养桥费</small>
                                        <h1>$655</h1>
                                    </div>
                                </div><!-- row -->

                                <div class="mb15"></div>

                                <div class="row">
                                    <div class="col-xs-6">
                                        <small class="stat-label">上个星期</small>
                                        <h4>$32,322</h4>
                                    </div>

                                    <div class="col-xs-6">
                                        <small class="stat-label">上个月</small>
                                        <h4>$503,000</h4>
                                    </div>
                                </div><!-- row -->

                            </div><!-- stat -->

                        </div><!-- panel-heading -->
                    </div><!-- panel -->
                </div><!-- col-sm-6 -->
            </div><!-- row -->

            <div class="row">
                <div class="col-sm-8 col-md-9">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-8">
                                    <h5 class="subtitle mb5">受力检测管理</h5>
                                    <p class="mb15">对应变、动挠度、静挠度、振动频率、索力、伸缩缝位移进行实时展示</p>
                                    <div id="basicflot" style="width: 100%; height: 300px; margin-bottom: 20px"></div>
                                </div><!-- col-sm-8 -->
                                <div class="col-sm-4">
                                    <h5 class="subtitle mb5">受力预警管理</h5>
                                    <p class="mb15">实时展示各项阈值</p>

                                    <span class="sublabel">趋势阈值 (40.05%)</span>
                                    <div class="progress progress-sm">
                                        <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                             role="progressbar" class="progress-bar progress-bar-primary"></div>
                                    </div><!-- progress -->

                                    <span class="sublabel">动挠度阈值 (32.12%)</span>
                                    <div class="progress progress-sm">
                                        <div style="width: 32%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                             role="progressbar" class="progress-bar progress-bar-success"></div>
                                    </div><!-- progress -->

                                    <span class="sublabel">静挠度阈值 (82.32%)</span>
                                    <div class="progress progress-sm">
                                        <div style="width: 82%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                             role="progressbar" class="progress-bar progress-bar-danger"></div>
                                    </div><!-- progress -->

                                    <span class="sublabel">振动频率阈值 (63.51%)</span>
                                    <div class="progress progress-sm">
                                        <div style="width: 63%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                             role="progressbar" class="progress-bar progress-bar-warning"></div>
                                    </div><!-- progress -->

                                    <span class="sublabel">索力阈值 (20.33%)</span>
                                    <div class="progress progress-sm">
                                        <div style="width: 20%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                             role="progressbar" class="progress-bar progress-bar-success"></div>
                                    </div><!-- progress -->

                                    <span class="sublabel">伸缩缝阈值 (26.62%)</span>
                                    <div class="progress progress-sm">
                                        <div style="width: 26%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
                                             role="progressbar" class="progress-bar progress-bar-success"></div>
                                    </div><!-- progress -->


                                </div><!-- col-sm-4 -->
                            </div><!-- row -->
                        </div><!-- panel-body -->
                    </div><!-- panel -->
                </div><!-- col-sm-9 -->

                <div class="col-sm-4 col-md-3">

                    <div class="panel panel-default">
                        <div class="panel-body">
                            <h5 class="subtitle mb5">受力预警占比</h5>
                            <p class="mb15">本月各项阈值预警占比</p>
                            <div id="donut-chart2" class="ex-donut-chart"></div>
                        </div><!-- panel-body -->
                    </div><!-- panel -->

                </div><!-- col-sm-3 -->

            </div><!-- row -->

            <div class="row">
                <div class="col-sm-6">

                    <div class="panel panel-success">
                        <div class="panel-heading padding5">
                            <div id="line-chart" class="ex-line-chart"></div>
                        </div>
                        <div class="panel-body">
                            <div class="tinystat pull-left">
                                <div id="sparkline" class="chart mt5"></div>
                                <div class="datainfo">
                                    <span class="text-muted">平均日交通量</span>
                                    <h4>630,201</h4>
                                </div>
                            </div><!-- tinystat -->
                            <div class="tinystat pull-right">
                                <div id="sparkline2" class="chart mt5"></div>
                                <div class="datainfo">
                                    <span class="text-muted">最大交通量</span>
                                    <h4>1139,201</h4>
                                </div>
                            </div><!-- tinystat -->
                        </div>
                    </div><!-- panel -->

                </div><!-- col-sm-6 -->
                <div class="col-sm-6">
                    <div class="panel panel-default panel-alt widget-messaging">
                        <div class="panel-heading">
                            <div class="panel-btns">
                                <a href="" class="panel-edit"><i class="fa fa-edit"></i></a>
                            </div><!-- panel-btns -->
                            <h3 class="panel-title">日志</h3>
                        </div>
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <small class="pull-right">11月10日</small>
                                    <h4 class="sender">本日各项参数正常</h4>
                                    <small>本日交通量为32412</small>
                                </li>
                                <li>
                                    <small class="pull-right">11月9日</small>
                                    <h4 class="sender">本日各项参数正常</h4>
                                    <small>本日交通量为23422</small>
                                </li>
                                <li>
                                    <small class="pull-right">11月8日</small>
                                    <h4 class="sender">本日应变阈值异常</h4>
                                    <small>原因：*********；解决法案：***********；是否解决：是</small>
                                </li>
                                <li>
                                    <small class="pull-right">11月7日</small>
                                    <h4 class="sender">本日各项参数正常</h4>
                                    <small>本日交通量为23423</small>
                                </li>
                                <li>
                                    <small class="pull-right">Dec 9</small>
                                    <h4 class="sender">本日动挠度阈值异常</h4>
                                    <small>原因：*********；解决法案：***********；是否解决：是</small>
                                </li>
                            </ul>
                        </div><!-- panel-body -->
                    </div><!-- panel -->
                </div><!-- col-sm-6 -->
            </div><!-- row -->
        </div><!-- contentpanel -->
        <!--        正文结束-->
    </div><!-- mainpanel -->
</section>
</body>
</html>
